import React from 'react';
import { Button, Row, Col, Card, Progress } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import CountUp from 'react-countup';
import { useTranslation } from 'react-i18next';

interface CardBinItem {
  cardbin: number;
  count: number;
  cardScheme: string;
}

interface CardStatus {
  normal: number;
  canceling: number;
  cancelled: number;
  other: number;
}

interface CardCountProps {
  loading: boolean;
  cardCount: number;
  cardBinList: CardBinItem[];
  cardStatus: CardStatus;
}

const CardCount: React.FC<CardCountProps> = ({
  loading,
  cardCount,
  cardBinList,
  cardStatus
}) => {
  const { t } = useTranslation();
  // 使用简单的进度条替代ECharts图表，避免类型问题
  const statusData = [
    { label: t('card_status.normal'), value: cardStatus.normal, color: '#55C639' },
    { label: t('card_status.canceling'), value: cardStatus.canceling, color: '#35BAE9' },
    { label: t('card_status.cancelled'), value: cardStatus.cancelled, color: '#FF3010' },
    { label: t('card_status.other'), value: cardStatus.other, color: '#7F8085' },
  ];

  if (loading) {
    return (
      <Card
        className="mb-5 min-h-85 shadow-[0px_0px_16px_0px_rgba(0,0,0,0.03)]"
        loading={true}
      >
        <div className="p-4">{t('app.route.reload')}</div>
      </Card>
    );
  }

  return (
    <Card
      className="mb-5 min-h-85 shadow-[0px_0px_16px_0px_rgba(0,0,0,0.03)]"
      bodyStyle={{ padding: '16px' }}
    >
      <div className="flex justify-between items-center mb-4">
        <div>
          <span className="text-2xl text-blue-800 font-bold">{t('card_statistics')}</span>
          <span className="inline-block px-3 text-gray-500">
            {t('total_cards_prefix')}
            <CountUp
              className="text-blue-700 font-bold mx-1"
              start={0}
              end={cardCount}
              duration={2}
              decimals={0}
              separator=""
            />
            {t('total_cards_suffix')}
          </span>
        </div>
        <div className="space-x-2">
          <Button type="primary" icon={<PlusOutlined />}>
            {t('add_card_holder')}
          </Button>
          <Button type="primary" icon={<PlusOutlined />}>
            {t('create_new_card')}
          </Button>
        </div>
      </div>

      <Row gutter={20} className="clear-both">
        <Col xs={24} md={24} lg={12} xl={12}>
          <p className="font-bold mb-2">{t('card_statistics')}</p>
          <div className="mt-2 min-h-60 w-full">
            <Row gutter={8}>
              {cardBinList.map((item, index) => (
                <Col key={index} xs={24} sm={24} md={12} lg={12} xl={12} className="mb-2">
                  <div className="rounded-lg bg-gray-100 p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <span className="w-10 h-5 bg-blue-300 rounded mr-2"></span>
                        <span className="font-bold">{item.cardbin}</span>
                      </div>
                      <CountUp
                        className="text-blue-700"
                        start={0}
                        end={item.count}
                        duration={2}
                        decimals={0}
                        separator=""
                        suffix={t('unit.card')}
                      />
                    </div>
                  </div>
                </Col>
              ))}
            </Row>
          </div>
        </Col>
        <Col xs={24} md={24} lg={12} xl={12}>
          <p className="font-bold mb-2">{t('card_status_title')}</p>
          <div className="mt-2 min-h-60 w-full rounded-lg bg-gray-100 p-4">
            {statusData.map((item, index) => (
              <div key={index} className="mb-3">
                <div className="flex justify-between items-center mb-1">
                  <span className="text-sm">{item.label}</span>
                  <span className="text-sm font-bold">{item.value}{t('unit.card')}</span>
                </div>
                <Progress
                  percent={cardCount > 0 ? Math.round((item.value / cardCount) * 100) : 0}
                  strokeColor={item.color}
                  showInfo={false}
                />
              </div>
            ))}
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default CardCount;